import {$message, AddressCascade, Button, Form, FormDatePicker, FormInput, FormInputNumber, FormItem, FormSelect, i18n, Ov, PageCard, PageCardContent, PageCardTitle, SelectOption, Space} from "plain-design";
import {designPage, onMounted, reactive, useRefs} from "@peryl/react-compose";
import {deepcopy} from '@peryl/utils/deepcopy';
import {usePageService} from "../../modules/micro/usePageService";
import {usePageConfig, usePageTitle} from "../../micro/MicroApp.pageConfig";
import {usePageButton} from "../../micro/MicroApp.pageButton";
import {usePageRender} from "src/micro/MicroApp.pageRender";
import {http} from "../../modules/plain-design/http";

export default designPage(() => {

  const { nav, pageParam } = usePageService();

  const { refs, onRef } = useRefs({ form: Form });

  console.log({ pageParam });

  /*设置页面标题*/
  usePageTitle(pageParam.row.id);

  /*设置页面按钮*/
  usePageButton({ label: '保存', seq: 99, primary: true, handler: () => {$message.primary('保存');} });
  usePageButton({ label: '保存1', handler: () => {$message.primary('保存');} });
  usePageButton({ label: '保存2', handler: () => {$message.primary('保存');} });

  /*设置页面其他配置信息*/
  usePageConfig(config => {config.hideNavigation = !state.formData.normalText;});
  usePageConfig(config => config.showBackButton = !!state.formData.id);

  usePageRender({
    processor: ({ list, render }) => {list.push({ render, seq: 99, key: 'bottom' });},
    render: () => (
      <PageCard>
        <PageCardTitle title="页面底部插入内容"/>
        <PageCardContent>
          <Button label={`HELLO:${state.formData.normalText}`}/>
        </PageCardContent>
      </PageCard>
    )
  });

  const state = reactive({
    formData: deepcopy(pageParam.row) as any
  });

  const selectOptions = [
    { label: i18n.$intl('page.listPage.selectOption.customer').d('消费者'), status: 'consumer' },
    { label: i18n.$intl('page.listPage.selectOption.potential').d('潜在客户'), status: 'potential' },
    { label: i18n.$intl('page.listPage.selectOption.store').d('门店'), status: 'store' },
  ];

  const handler = {
    validate: async () => {
      await refs.form!.validate();
      $message.success(i18n.$intl('page.detailPage.validateComplete').d('校验通过'));
    },
    reset: () => {
      state.formData = deepcopy(pageParam.row);
      refs.form!.clearValidate();
    },
    back: () => nav.back()
  };

  onMounted(async () => {
    const reps = await http.post<{ result: any }>('demo/item', { normalText: pageParam.row.normalText });
    console.log({ reps });
  });

  return () => (
    <>
      <Form modelValue={state.formData} singleColumnCenter ref={onRef.form}>
        <FormInput label={i18n.$intl('page.listPage.field.id').d('编号')} v-model={state.formData.id} required/>
        <FormInput label={i18n.$intl('page.listPage.field.normalText').d('文本')} v-model={state.formData.normalText} required/>
        <FormDatePicker datetime label={i18n.$intl('page.listPage.field.createdAt').d('创建时间')} v-model={state.formData.createdAt}/>
        <FormDatePicker datetime label={i18n.$intl('page.listPage.field.updatedAt').d('更新时间')} v-model={state.formData.updatedAt}/>
        <FormDatePicker label={i18n.$intl('page.listPage.field.dateVal').d('日期')} v-model={state.formData.dateVal}/>
        <FormItem label={i18n.$intl('page.listPage.field.ovVal').d('选项值')}>
          <Ov v-model={state.formData.ovVal} ov="promotion"/>
        </FormItem>
        <FormItem label={i18n.$intl('page.detailPage.address').d('地址')}>
          <AddressCascade
            v-model:province={state.formData.provinceVal}
            v-model:city={state.formData.cityVal}
            v-model:district={state.formData.districtVal}
          />
        </FormItem>
        <FormInputNumber label={i18n.$intl('page.listPage.field.count').d('计数')} v-model={state.formData.count}/>
        <FormInputNumber label={i18n.$intl('page.listPage.field.numberVal').d('数字')} v-model={state.formData.numberVal}/>
        <FormSelect label={i18n.$intl('page.listPage.field.selectVal').d('下拉选择')} v-model={state.formData.selectVal}>
          {selectOptions.map((item) => (
            <SelectOption label={item.label} val={item.status} key={item.status}/>
          ))}
        </FormSelect>
        <FormInput label={i18n.$intl('page.listPage.field.email').d('邮箱(校验)')} v-model={state.formData.email} formAttrs={{ validateType: 'email' }} required/>
        <FormItem colon={false} contentAlign="center">
          <Space style={{ display: 'inline-block' }}>
            <Button label={i18n.$intl('page.detailPage.validate').d('校验')} onClick={handler.validate}/>
            <Button label={i18n.$intl('page.detailPage.reset').d('重置')} onClick={handler.reset}/>
            <Button label={i18n.$intl('page.detailPage.back').d('返回')} onClick={handler.back}/>
          </Space>
        </FormItem>
      </Form>
    </>
  );
});
